<template>
    <div>
        <h1>会员修改</h1>
        {{ info }}
        <table class="table table-bordered">
               <tr>
                <td align="right">会员编号</td>
                <td><input type="text" v-model="info.memberCode" disabled></td>
               </tr>
               <tr>
                <td align="right">手机号</td>
                <td><input type="text"  v-model="info.tel" maxlength="11"></td>
               </tr>
               <tr>
                <td align="right">姓名</td>
                <td><input type="text"  v-model="info.userName"></td>
               </tr>
                <tr>
                <td align="right">证件类型</td>
                <td>
                    <select v-model="info.cardType">
                        <option value="">请选择</option>
                        <option :value="item" v-for="item in arr">{{ item }}</option>
                    </select>
                </td>
               </tr>
               <tr>
                <td align="right">身份证</td>
                <td><input type="text"  v-model="info.card" maxlength="18"></td>
               </tr>
               <tr>
                <td align="right">会员生日</td>
                <td><input type="date"  v-model="info.birthDay"></td>
               </tr>
               <tr>
                <td align="right">积分</td>
                <td><input type="text"  v-model="info.score"></td>
               </tr>
               <tr>
                <td align="right">余额</td>
                <td><input type="text"  v-model="info.money"></td>
               </tr>
               <tr>
                <td align="right">等级</td>
                <td>
                    <select  v-model="info.levelId">
                        <option value="">请选择</option>
                        <option :value="item.id" v-for="item in LevelList">
                                {{ item.levelName }}
                        </option>
                    </select>
                </td>
                </tr>
                <tr>
                <td align="right">会员性别</td>
                <td><input type="radio" name="gender" :value="1" v-model="info.gender">男
                    <input type="radio" name="gender" :value="0" v-model="info.gender">女
                </td>
               </tr>
               <tr>
                <td align="right">会员爱好</td>
                <td><input type="checkbox" name="likes" v-model="info.likes" value="吃">吃
                <input type="checkbox" name="likes" v-model="info.likes" value="喝">喝
                <input type="checkbox" name="likes" v-model="info.likes" value="抽">抽
                </td>
               </tr>
               <tr>
                <td align="right">会员简介</td>
                <td>
                    <textarea rows="5" cols="50"  v-model="info.desc">

                    </textarea>
                </td>
               </tr>
               <tr>
                <td align="right">是否同意条款</td>
                <td>
                   <input type="checkbox"  v-model="info.isAgree">xxx条款
                </td>
               </tr>
               <tr>
                <td align="right"></td>
                <td><input type="button" value="修改" class="btn btn-success" @click="ok"></td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';
//路由器对象
const router = useRouter();
//路由信息对象
const route = useRoute();

console.log(route);
//声明一个变量获取增加会员所需的数据
let info: any = reactive({
  id: route.query.id,
  memberCode:
    moment(new Date()).format('YYYYMMDD') +
    Math.random().toString().substring(2, 5),
  tel: '',
  userName: '',
  card: '',
  birthDay: '',
  score: '',
  money: '',
  levelId: '',
  gender: 1,
  likes: [],
  desc: '',
  isAgree: '',
  cardType: '',
});
let arr: any = ref(['身份证', '驾驶证', '军人证', '护照']);
let LevelList:any=ref([{
    id:'',
    levelName:''
}]);
onMounted(()=>{
     //发送网络请求
    getLevelList();
    getData();
});
//修改的第二件事:返填
const getData = () => {
  axios({
    url: '/api/Member/GetMemberItem',
    method: 'get',
    params: {id: route.query.id},
  })
    .then((res) => {
      console.log(res);
      Object.assign(info, res.data);
      info.birthDay = res.data.birthDay.substring(0, 10); //时间返填
      info.likes = res.data.likes.split(','); //将字符串转成数组
    })
    .catch((err) => {
      console.log(err);
    });
};
const getLevelList=()=>{
    axios({
        url:'/api/Member/GetMemberList',
        method:'get'
    })
    .then((res)=>{
         console.log(res);
         LevelList.value=res.data;
    })  
    .then((err)=>{
         console.log(err);
    })  
};
const ok=()=>{
   if(info.tel==''){
    alert('手机号不为空');
    return;
}
  //手机号正则
  let reg=/^1[3-9]\d{9}$/;
if(reg.test(info.tel)==false){
    alert('手机号不正确');
    return;
}
if(info.userName==''){
    alert('姓名不为空');
    return;
}
if(info.card==''){
    alert('身份证不为空');
    return;
}
let reg1=/^\d{17}[0-9xX]$/;
if(reg1.test(info.card)==false){
     alert('身份证号不正确');
    return;
}
if(info.birthDay==''){
    alert('生日必填');
    return;
}
if(info.score==''){
    alert('积分不为空');
    return;
}
let reg2=/^[+]?\d+$/;
if(reg2.test(info.score)==false){
    alert('积分只能是正数');
    return;
}
if(info.money==''){
    alert('余额不为空');
    return;
}
if(reg2.test(info.money)==false){
    alert('余额只能是正数');
    return;
}
if(info.levelId==''){
    alert('等级必选');
    return;
}
if(info.likes.length==0){
    alert('爱好必选');
    return;
}
if(info.desc==''){
    alert('简介不为空');
    return;
}
//let reg3=/^[\u4e00-\u9fa5]{1-50}$/;
//if(reg3.test(info.desc)==false){
  //  alert('只能是50以内的汉字');
   // return;
//}
if(info.isAgree==false){
    alert('同意条款必选');
    return;
}
info.likes=info.likes.toString();
axios({
    url: '/api/Member/UpdateMember',
    method: 'put',
    data: info,
  })
    .then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert('修改成功');
        //跳转到会员列表
        router.push('/memberList');
        return;
      }
      if (res.data == -1) {
        alert('手机号重复');
        return;
      } else {
        alert('修改失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
</script>

<style scoped>

</style>